<template>
  <CustomSearch
      :searchField="queryList"
      :searchData="state.queryData"
      :searchBarButton="btnList"
      :labelWidth="80"
  >
  </CustomSearch>
  <CustomTable
      :tableHead="col"
      :isShowIndex="true"
      :isLoading="state.isLoading"
      :tableData="state.tableData"
      :tableOperateBar="operates"
      @doubleClick="doubleClick"
  >
  </CustomTable>
  <Pagination v-show="state.totalRows > 0"
              :total="state.totalRows"
              v-model:page="state.page"
              v-model:limit="state.limit"
              @pagination="getList"/>
  <CustomUpload
      v-model:visible="state.visible"
      :isLoading="state.isUploadLoading"
      @uploadApi="uploadApi"
      :width="35"
  >
  </CustomUpload>
  <CustomDialog
      v-model:visible="state.videoVisible"
      :destroyOnClose="true"
      :title="state.title"
  >
    <template #default>
      <videoPlay
          v-bind="options"
          @play="onPlay"
          @pause="onPause"
          @timeupdate="onTimeupdate"
          @canplay="onCanplay"/>
    </template>
  </CustomDialog>
</template>

<script lang="ts" setup name='FileUpDown'>
import {} from 'vue'
import {FileService} from '../../../api/file/fileUpDown'
import {ElMessage} from "element-plus";
import {download} from "../../../utils/downloadBlob";
import videoPlay from 'vue3-video-play'

const URL: string = '/api'

let queryList: ISearchField[] = [
  {
    label: '名称',
    field: 'fileName',
    span: 5,
    inputType: 'string'
  },
]
let btnList: ISearchBarButton[] = [
  {
    label: '查询',
    type: 'primary',
    method: () => {
      getList()
    },
  },
  {
    label: '上传',
    type: 'primary',
    icon: 'UploadFilled',
    method: () => {
      state.visible = true
    },
  }

]

const col: ITableHead[] = [
  {
    label: '名称',
    field: 'fileName',
    width: 200,
    inputType: 'readonly',
  },
  {
    label: '图片',
    field: 'fileUrl',
    inputType: 'image',
    width: 230,
  },
]

const uploadApi = (file: File) => {
  state.isUploadLoading = true
  //FormData对象，添加参数只能通过append('key', value)的形式添加
  const formData = new FormData();
  formData.append("file", file)
  FileService.upload(formData)
      .then(({data}) => {
        ElMessage.success(`上传 ${file.name} 成功！`)
      })
      .finally(() => {
        state.isUploadLoading = false
        state.visible = false
        getList()
      })
}
const downLoadApi = (id: number) => {
  FileService.download({id: id})
      .then(res => {
        download(res)
      })
}

let operates: ITableOperateBar = {
  width: 150,
  list: [
    {
      label: "下载",
      type: 'primary',
      method: (index: number, row: any) => {
        downLoadApi(row.id)
      },
    },
    {
      label: "删除",
      type: 'danger',
      title: '确认删除这条数据？',
      method: (index: number, row: any) => {
        FileService.delete({id: row.id})
            .then(({data}) => {
              ElMessage.success(`文件 ${data.resultObj?.fileName} 删除成功`)
            })
            .finally(() => {
              getList()
            })
      },
    },
  ],
}

const state = reactive({
  page: 1,
  limit: 10,
  isLoading: false,
  isUploadLoading: false,
  totalRows: 0,
  visible: false,
  //视频弹框
  videoVisible: false,
  tableData: [],
  //查询的数据
  queryData: {
    fileName: ''
  },
  //视频标题
  title: ''
})

// 视频播放
const options = reactive({
  width: "800px", //播放器高度
  height: "450px", //播放器高度
  color: "#409eff", //主题色
  title: "", //视频名称
  src: "", //视频源
  poster: import.meta.env.VITE_BASE_URL + '/image/2023_01_29/313d6e7acf044632a06fc583fbd42341.png', //封面
  muted: false, //静音
  webFullScreen: false,
  speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
  autoPlay: false, //自动播放
  loop: false, //循环播放
  mirror: false, //镜像画面
  //ligthOff: false, //关灯模式
  volume: 0.3, //默认音量大小
  control: true, //是否显示控制
  controlBtns: [
    "audioTrack",
    "quality",
    "speedRate",
    "volume",
    "setting",
    "pip",
    "pageFullScreen",
    "fullScreen",
  ], //显示所有按钮,
  //type: 'm3u8'
})

const doubleClick = (row) => {
  let url: string = row.fileUrl as string
  if (url && url.endsWith('.mp4')) {
    state.title = row.fileName
    options.src = row.fileUrl
    state.videoVisible = true
  }
}

const onPlay = (ev) => {
  console.log('播放')
}
const onPause = (ev) => {
  console.log(ev, '暂停')
}

const onTimeupdate = (ev) => {
  //console.log(ev, '时间更新')
}
const onCanplay = (ev) => {
  console.log(ev, '可以播放')
}

const getList = () => {
  state.isLoading = true
  FileService.list({...state.queryData, "currentPage": state.page, "pageSize": state.limit})
      .then(({data}) => {
        data.resultObj!.rows.forEach((e:IFileInfo) => {
          e.fileUrl = import.meta.env.VITE_BASE_URL + URL + e.fileUrl
        })
        state.tableData = data.resultObj!.rows
        state.totalRows = data.resultObj!.totalRows
        state.isLoading = false
      })
      .catch(e => {
        state.isLoading = false
      })
}


onMounted(() => {
  getList()
})
</script>

<style scoped lang='less'>

</style>
